<template>
  <div>
    <searchBox @handleSearch="handleSearch" @handleReset="handleReset">
      <el-form :model="searchFrom.param" ref="shopProductForm" :inline="true">
        <el-form-item label="采集网站" prop="collectionSiteId">
          <el-select v-model="searchFrom.param.collectionSiteId" placeholder="请选择" style="width: 200px" clearable>
            <el-option v-for="dict in host_type" :key="dict.id" :label="dict.name" :value="dict.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" prop="name">
          <el-input v-model.trim="searchFrom.param.name" placeholder="请输入" clearable />
        </el-form-item>
      </el-form>
    </searchBox>
    <!-- <el-button class="mb8" type="primary" @click="handleEdit(3, {})">新增</el-button> -->

    <el-table :data="tableData" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      style="height: calc(100vh - 300px)">
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column label="采集网站">
        <template #default="scope">
          <el-link :href="scope.row.url" target="_blank" :underline="false">{{
            scope.row.collectionSiteName
          }}</el-link>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="分类名称" />
      <el-table-column label="图片" align="center">
        <template #default="scoped">
          <ImagePreview :src="scoped.row.host" width="50px" height="50px"></ImagePreview>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述">
        <template #default="scope">
          <el-tooltip effect="dark" placement="top-start">
            <template #content>
              <div style="max-width: 500px;" v-html="scope.row.newDescription">
              </div>
            </template>
            <el-text line-clamp="2">
              <div v-html="scope.row.newDescription"></div>
            </el-text>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="newLastModified" label="更新时间" align="center" width="180" />
      <el-table-column label="操作" align="center" width="100">
        <template #default="scoped">
          <el-button link type="primary" @click="handleEdit(1, scoped.row)">编辑</el-button>
          <!-- <el-button link type="primary" @click="handleEdit(2, scoped.row)">新增</el-button> -->
          <!-- <el-button link type="danger" @click="handleEdit(0, scoped.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination :total="total" :limit="searchFrom.pageSize" :page="searchFrom.pageNum" @pagination="handlePageChange">
    </Pagination>
    <AddShopProduct :newType="newType" :shopProductOpen="shopProductOpen" :publicItem="publicItem"
      @handleShopProductClose="handleShopProductClose" @handleShopProductSure="handleShopProductSure"
      :host_type="host_type"> </AddShopProduct>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import AddShopProduct from "./components/addShopProduct.vue";

const { proxy } = getCurrentInstance();
const shopProductOpen = ref(false)//默认是false
const host_type = ref([]); //获取来源网站

const total = ref(0)
const newType = ref(3)
const publicItem = ref({})
const tableData = ref([
]);
const searchFrom = ref({// 查询参数
  pageNum: 1,
  pageSize: 10,
  param: {
    collectionSiteId: null,//采集网站
    name: "",
  },
});
const getList = () => {
  product.rawcategory.rawcategoryList({
    data: searchFrom.value
  }).then((res) => {
    total.value = res.total
    if (res.code === 200 && res.data?.length) {
      res.data = res.data.map(code => {
        return {
          ...code,
          newDescription: proxy.decodeHtmlEntities(code.description),
          newLastModified: proxy.DateTime(code.lastModified),
        }
      })
    }
    tableData.value = res.data
    console.log(res.data
    )
  });
};
const handleEdit = (index, row) => {
  newType.value = index
  if (index === 1) {
    shopProductOpen.value = true
    publicItem.value = row

  } else if (index === 2) {
    shopProductOpen.value = true
    publicItem.value = row

  } else if (index === 3) {
    shopProductOpen.value = true
    publicItem.value = {}
  } else {
    proxy.$modal
      .confirm("是否确认删除此数据项？")
      .then(() => { })
  }
}
const handleSearch = () => {
  getList();
}
const handleReset = () => {
  searchFrom.value = {
    pageNum: 1,
    pageSize: 10,
    param: {
      collectionSiteId: null,//采集网站
      name: "",
    },
  }
  getList();
}
// 分页
const handlePageChange = (newPage) => {
  searchFrom.value.pageNum = newPage.page;
  searchFrom.value.pageSize = newPage.limit;
  getList();
};
onMounted(() => {
  getSiteList();
  getList()
});
const getSiteList = () => {// 获取采集网站
  let from = {
    pageNum: 1,
    pageSize: 999,
    param: {},
  };
  product.collectionsite
    .collectionsiteList({
      data: from,
    })
    .then((res) => {
      host_type.value = res.data;
    });
};
const handleShopProductClose = () => {
  shopProductOpen.value = false
}
const handleShopProductSure = () => {
  getList()
  shopProductOpen.value = false
}

</script>